<head>
	<style>
		.center{
			text-align: center;
		}
		.s{
			margin-top: 11px;
		}
		.s1{
			width: 48%;
			height: 91%;
			border: 1px solid lightgray;
			overflow: auto;
			display: inline-block;
		}
		.s1 textarea{
			min-width: 100%;
			height: 100%;
			border: 1px solid lightgray;
			outline: none;
		}
		.setting-div{
			position: fixed;
			top: 8px;
			right: 11px;
			width: 236px;
			cursor: pointer;
		}
		#setting{
			background-color: white;
			padding: 8px;
		}
		.setting-title{
			background-color: lightgray;
		}
		.setting-div label{
			display: inline-block;
			width: 50px;
			
		}
		.setting-btn-div{
			border-top: 1px solid lightgray;
			margin: 5px 0px;
			padding: 5px 0px;
		}
		.setting-btn{
			position: relative;
			left: 190px;
		}
		.slider{
			position: relative;
			margin: 7px 0;
		}
		.slider-title{
			display: inline-block;
			width: 25%;
			cursor: default;
			overflow: hidden;
		}
		.slider-slider{
			display: inline-block;
			position: absolute;
			top: 55%;
			height: 3px;
			margin: 0px 5px;
			width: 70%;
			border: 1px solid lightgray;
		}
		.slider-block{
			position: absolute;
			height: 7px;
			bottom: -1px;
		}
		.slider-block:before {
			content: '';
			display: block;
			position: absolute;
			left: -2px;
			border-color: black transparent transparent transparent;
			border-width: 2px;
			border-style: solid;
		}
		.slider-block:after {
			content: '';
			display: block;
			position: absolute;
			background-color: black;
			bottom: 7px;
			left: -2px;
			width: 4px;
			height: 7px;
		}
		.slider-block-title{
			position: absolute;
			bottom: 4px;
			font-size: 12px;
		}
		.slider-block-title-left{
			left: 4px;
		}
		.slider-block-title-right{
			right: 4px;
		}
		.slider-children{
			#margin-left: 11px;
		}
	</style>
</head>
<body>
	<div class="center">
		<input id="img" type="file"/>
	</div>
	<div class="setting-div">
		<div class="center setting-title" onclick="showSetting()">
			↓↑
		</div>
		<div id="setting" style="display: none;">
			<label>r</label><input id="r" type="text" value="125"/><br/>
			<label>g</label><input id="g" type="text" value="125"/><br/>
			<label>b</label><input id="b" type="text" value="125"/><br/>
			<label>a</label><input id="a" type="text" value="0.5"/><br/>
			<label>hh</label><input id="hh" type="text" value="2"/><br/>
			<label>dense</label><input id="dense" type="text" value="1"/><br/>
			<label>revert</label>
			<select id="revert">
				<option value="0">false</option>
				<option value="1">true</option>
			</select>
			<br/>
			<label>bg1</label><input id="bg1" type="text" value="@"/><br/>
			<label>bg2</label><input id="bg2" type="text" value="."/><br/>
			<br/>
			<div id="slider"></div>
			<div class="setting-btn-div">
				<input class="setting-btn" onclick="todo()" type="button" value=">>">
			</div>
		</div>
	</div>
	<div class="center s">
		<div class="s1">
			<canvas id="canvas">
		</canvas>
		</div>
		<div class="s1">
			<textarea id="area" readonly></textarea>
		</div>
	</div>
	
		<script>
		
		function getSliderView(sliderRoot, slider){
			sliderRoot.onselectstart = function(){
				return false;
			}
			document.onmouseup = onSlideup;
			document.onmousemove = onSlideMove;
			var v = getSlider(slider);
			sliderRoot.innerHTML = v;
		}
		
		var slider_value = {};
		
		function getSlider(slider){
			setScale(slider);
			var posClass = getTitlePos(slider.current);
			var isParent = false;
			if(slider.children && slider.children.length){
				isParent = true;
			}
			slider_value[slider.id] = slider.current;
			var v = '<div>'
				+ '<div class="slider">'
					+ '<div class="slider-title">' + slider.title + '</div>'
					+ '<div class="slider-slider" '
					+ 'min="' + slider.min + '" max="' + slider.max + '" step="' + slider.step + '">'
					+ '<div _id="' + slider.id + '" parent="' + isParent + '" class="slider-block" style="left: ' + slider.current + '%" onmousedown="onSlide()">'
					+ '<div class="slider-block-title ' + posClass + '">' + slider.current + '</div>'
					+ '</div>'
					+ '</div>'
				+ '</div>';
			if(isParent){
				v = v + '<div class="slider-children">';
				for(var i = 0; i < slider.children.length; i++){
					var child = slider.children[i];
					v = v + getSlider(child);
				}
				v = v + '</div>';
			}
			v = v + '</div>';
			return v;
		}
		
		function getValue(){
			return slider_value;
		}
		
		function setScale(slider){
			var scale = {};
			scale[slider.min] = 0;
			scale[slider.max] = 100;
			var interval = Math.ceil((slider.max-slider.min+1)/slider.step);
			var _interval = 100/interval;
			for(var i=1;i<interval;i++){
				var next = slider.min + slider * i;
				var nextV = _interval * i;
				if(next < slider.max && nextV < 100){
					scale[next] = nextV;
				}
			}
			slider.scale = scale;
		}
		
		function getTitlePos(current, titleEle){
			var posClass = current > 50?"slider-block-title-right":"slider-block-title-left";
			if(titleEle){
				titleEle.classList.remove("slider-block-title-right");
				titleEle.classList.remove("slider-block-title-left");
				titleEle.classList.add(posClass);
			}
			return posClass;
		}
		
		var sliding = false;
		var slide_current;
		var slide_current_ele;
		var slide_current_x = 0;
		var slide_current_left = 0;
		function onSlide(){
			sliding = true;
			slide_current_x = event.screenX;
			slide_current = slider;
			slide_current_ele = event.target;
			slide_current_left = slide_current_ele.style.left;
			slide_current_left = parseInt(slide_current_left);
		}
		
		function onSlideMove(){
			if(sliding){
				var x=event.screenX;
				//var interval = Math.ceil((slide_current.max-slide_current.min+1)/slide_current.step);
				//var sep = slide_current_ele.parentElement.clientWidth/interval;
				var sep = slide_current_ele.parentElement.clientWidth/100;
				//var sep = slide_current.step;
				var leftStyle = slide_current_ele.style.left;
				leftStyle = parseInt(leftStyle);
				if(Math.abs(slide_current_x - x) > sep){
					if(leftStyle >= 0 && leftStyle <=100){
						var mouseInterval = parseInt((slide_current_x - x)/sep);
						var newleft = slide_current_left - mouseInterval;
						//console.log(slide_current_left, slide_current_x, x, sep, newleft);
						newleft = newleft<0?0:(newleft>100?100:newleft);
						slide_current_ele.style.left = newleft + '%';
						
						var titleEle = slide_current_ele.firstElementChild;
						getTitlePos(newleft, titleEle);
						//titleEle.innerText = slide_current.min + mouseInterval * sep;
						titleEle.innerText = newleft;
						var id = slide_current_ele.getAttribute("_id");
						var isParent = slide_current_ele.getAttribute("parent");
						slider_value[id] = newleft;
						changeChildren(isParent, newleft, slide_current_ele);
					}
				}
			}
		}
		
		function changeChildren(isParent, newleft, block){
			if(isParent == "true"){
				var childEle = block.parentElement.parentElement.parentElement.getElementsByClassName("slider-children");
				if(childEle && childEle.length){
					var childBlock = childEle[0].getElementsByClassName("slider-block");
					for(var i=0;i<childBlock.length;i++){
						childBlock[i].style.left = newleft + "%";
						var childTitleEle = childBlock[i].firstElementChild;
						childTitleEle.innerText = newleft;
						getTitlePos(newleft, childTitleEle);
						var id = childBlock[i].getAttribute("_id");
						var isParent = childBlock[i].getAttribute("parent");
						slider_value[id] = newleft;
						changeChildren(isParent, newleft, childBlock[i]);
					}
					
				}
			}
		}
		
		function onSlideup(){
			sliding = false;
		}
	</script>
	
	<script>
		var iFile=document.getElementById('img');
		var canvas=document.getElementById('canvas');
		var area=document.getElementById('area');
		
		var sliderDiv = document.getElementById('slider');
		var slider = {
			id : 1,
			title : "Size(%)",
			min : 1,
			max : 100,
			step : 1,
			current: 100,
			children : [
				{
					id : 2,
					title : "Width",
					min : 1,
					max : 100,
					step : 1,
					current: 55
				},
				{
					id : 3,
					title : "Height",
					min : 1,
					max : 100,
					step : 1,
					current: 55
				}
			]
		};
		getSliderView(sliderDiv, slider);
		
		var imgWidth = 0;
		var imgHeight = 0;
		var imgFile;
		
		var rV;
		var gV;
		var bV;
		var aV;
		var hhV;
		var denseV;
		var revertV;

		iFile.addEventListener("change", function (e) {
			var img = e.target.files[0];

			if (!img) {
				alert("select image");
				return;
			}

			if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|jpeg|png|gif)$/i.test(img.name))){
				alert("select image");
				return;
			}

			if (img.size > 500 * 1024){
				 //alert('<500K');
				 //return;
			}

			var image = new Image()
			image.src = window.URL.createObjectURL(img)
			image.onload = function () {
				imgFile = this;
				getImageData();

			}
		})
		
		function showSetting(){
			var tag = document.getElementById('setting');
			if(tag.style.display == 'none'){
				tag.style.display = 'block';
			}else{
				tag.style.display = 'none';
			}
		}
		
		function todo(){
			getImageData();
			
		}
		
		function getImageData(){
			if(!imgFile){
				alert("select image");
				return;
			}
			//imgWidth = imgFile.width;
			//imgHeight = imgFile.height;
			var value = getValue();
			var imgWidthPesent = value['2']?value['2']:100;
			var imgHeightPesent = value['3']?value['3']:100;
			imgWidth = imgFile.width * imgWidthPesent/100;
			imgHeight = imgFile.height * imgHeightPesent/100;
			console.log('img:', imgWidth + '/' + imgHeight + '/' + length);
			var context = canvas.getContext('2d');
			canvas.width = imgWidth;
			canvas.height = imgHeight;
			context.drawImage(imgFile, 0, 0, imgWidth, imgHeight);
			var imgdatas = context.getImageData(0, 0, imgWidth, imgHeight);
			imgdata = imgdatas.data;
			getRgba(imgdata);
		}

		function getRgba(imgdata) {
		
			var rT = document.getElementById('r').value;
			var gT = document.getElementById('g').value;
			var bT = document.getElementById('b').value;
			var aT = document.getElementById('a').value;
			var hhT = document.getElementById('hh').value;
			var denseT = document.getElementById('dense').value;
			var revertT = document.getElementById('revert').value;
			
			rV = rT?parseInt(rT):125;
			gV = gT?parseInt(gT):125;
			bV = bT?parseInt(bT):125;
			aV = aT?parseFloat(aT):0.5;
			hhV = hhT?parseInt(hhT):2;
			denseV = denseT?parseInt(denseT):1;
			revertV = revertT=='1'?true:false;
		
			var length = imgdata.length;
			var matrix = [];
			var heightIndex = -1;
			for (var i = 0; i < length; i++) {
				if (i % 4 == 0) {
					var r = imgdata[i];
					var g = imgdata[i + 1];
					var b = imgdata[i + 2];
					var a = Math.round(imgdata[i + 3] / 255 * 100) / 100;

					var rgba = [r,g,b,a];
					if(i/4%imgWidth == 0){
						heightIndex++;
						matrix[heightIndex] = [];
					}
					matrix[heightIndex].push(rgba);
				}
				
			}
			console.log(matrix);
			draw(matrix);
		}

		function draw(matrix){
			var content = '';
			var flag1 = 0,flag2 = 0;
			var bg1 = document.getElementById('bg1').value;
			var bg2 = document.getElementById('bg2').value;
			for(var i=0;i<matrix.length;i = i + hhV){
				var line = matrix[i];
				for(var j=0;j<line.length;j++){
					if(checkColor(matrix, i, j)){
						flag1 = flag1 + 1;
						flag2 = 0;
						if(flag1 >= denseV){
							flag1 = 0;
							content = content + (revertV?bg2:bg1);
						}
					}else{
						flag2 = flag2 + 1;
						flag1 = 0;
						if(flag2 >= denseV){
							flag2 = 0;
							content = content + (revertV?bg1:bg2);
						}
						
					}
				}
				content = content + '\n';
			}
			var areaWidth = matrix[0].length/2*6;
			area.style.width = areaWidth + 'px';
			area.value = content;
		}
		
		function checkColor(matrix, i, j){
			for(var a=0;a<hhV;a++){
				var line = matrix[i+a];
				if(line){
					var rgba = line[j];
					if((rgba[0] < rV && rgba[1] < gV && rgba[2] < bV) && rgba[3] > aV){
						return true;
					}
				}
			}
			return false;
		}
		
	</script>

</body>